<template>
	<view>
		<view class="phonebox">
			<view class="phtit">手机号码</view>
			<input type="text" placeholder="请输入要绑定的手机号码" v-model="phone"/>
			<!-- <button open-type="getPhoneNumber" @getphonenumber="getphonenumber">手机号</button> -->
		</view>
		<view class="phonebox">
			<view class="phtit">验证码</view>
			<view class="phyzm">
				<input type="text" placeholder="请输入验证码" v-model="captcha"/>
				<view class="text"  @click="startCountdown">
					{{buttonText}}
				</view>
			</view>
		</view>
		<view class="namebu" @click="changephone">下一步</view>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
import { ref } from 'vue';
import request from '../../utils/request';
let phone=ref('')
let captcha=ref('')
const totalTime = ref(60); // 倒计时总时长，单位：秒
const currentTime = ref(0); // 当前倒计时时间
const isCounting = ref(false); // 标识是否正在倒计时
const buttonText = ref('发送验证码'); // 按钮显示文本
const phoneRegex = /^1[3-9]\d{9}$/;
const status = ref('')
let opid = ref('')
let token = ref('')
onLoad ((options) => {
	if (uni.getStorageSync('opid')) {
		opid.value = uni.getStorageSync('opid')
	} else {
		open()
	}
	token.value = uni.getStorageSync('token')
	if (options.status) {
		status.value = options.status
	}
})

const getphonenumber = (e) => {
	console.log(e)
}

const open = () => {
		uni.login({
			provider: 'weixin',
			success: (res) => {
				console.log(res, 'res')
				const code = res.code
				request.get('Index/getOpenId', {
					data: {
						code: code
					}
				}).then(res => {
					opid.value = res.data
					uni.setStorageSync("opid", res.data)
				}).catch(err => {
					console.log(err);
				})
			},
			fail: err => {
				console.log(err)
			}
		})
	}

const changephone=()=>{
	if(phone.value==''){
		uni.showToast({
			title:'手机号不能为空',
			icon:'none'
		}) 
		return
	}
	if(!phoneRegex.test(phone.value)){
		uni.showToast({
			title:'请输入正确的手机号格式',
			icon:'none'
		}) 
		return
	}
	if (!captcha.value) {
		uni.$u.toast('验证码不能为空')
		return
	}
	if (status.value) {
		request.post('user/changemobile', {
			data: {
				mobile: phone.value,
				captcha: captcha.value
			},
			header: {
				'content-type': 'application/json',
				'token': token.value
			}
		}).then(res => {
			if (res.code == 1) {
				uni.$u.toast(res.msg)
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/myde/myde'
					})
				}, 1200)
				return
			}
			uni.$u.toast(res.msg)
		})
	} else {
		request.post('User/wechatlogin', {
			data: {
				open_id: opid.value,
				mobile: phone.value,
				nickname: '',
				avatar: '',
				invate_code: '',
				captcha: captcha.value
			},
			header: {
				'content-type': 'application/json'
			}
		}).then(res => {
			if (res.code == 1) {
				uni.$u.toast(res.msg)
				uni.setStorageSync('token', res.data.userinfo.token)
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/myde/myde'
					})
				}, 1200)
				return
			}
			uni.$u.toast(res.msg)
		})
	}
	
	// if(phone.value==''){
	// 	uni.showToast({
	// 		title:'手机号不能为空',
	// 		icon:'none'
	// 	}) 
	// }else if(!phoneRegex.test(phone.value)){
	// 	uni.showToast({
	// 		title:'请输入正确的手机号格式',
	// 		icon:'none'
	// 	}) 
	// }else{
	// 	// uni.setStorageSync("phone",phone.value)
	// 	// uni.showToast({
	// 	// 	title:'修改成功',
			
	// 	// })
	// 	 const timerId = setTimeout(() => {
	// 	      uni.navigateBack();
	// 	    }, 2000);
	// 	 onUnmounted(() => {
	// 	      clearTimeout(timerId);
	// 	    });
	// }
	// const timerId = setTimeout(() => {
	//      uni.navigateBack();
	//    }, 2000);
	// onUnmounted(() => {
	//      clearTimeout(timerId);
	//    });
}
const startCountdown = () => {
	if(phone.value==''){
		uni.showToast({
			title:'手机号不能为空',
			icon:'none'
		}) 
		return
	}
	if(!phoneRegex.test(phone.value)){
		uni.showToast({
			title:'请输入正确的手机号格式',
			icon:'none'
		}) 
		return
	}
	if (status.value) {
		var event = 'changemobile'
	} else {
		var event = 'mobilelogin'
	}
	request.post('sms/send', {data: {mobile: phone.value, event:event}}).then(res=>{
		if (res.code == 0) {
			uni.$u.toast(res.msg)
			return
		}
		if (res.code = 1) {
			if (!isCounting.value) {
			  isCounting.value = true;
			  currentTime.value = totalTime.value;
			  buttonText.value = `${currentTime.value}秒后\n重新发送`;
			  const timer = setInterval(() => {
			    currentTime.value--;
			    buttonText.value = `${currentTime.value}秒后\n重新发送`;
			    if (currentTime.value <= 0) {
			      clearInterval(timer);
			      isCounting.value = false;
			      buttonText.value = '发送验证码';
			    }
			  }, 1000);
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}).catch(err=>{
		console.log(err);
	})
};
</script>

<style scoped lang="scss">
	.phonebox{
		width: 690rpx;
		height: 160rpx;
		border-bottom: 1px solid #d5d5d5;
		margin: 0 auto;
	}
	.phtit{
		height: 90rpx;
		line-height: 90rpx;
	}
	
	button {
		padding: 0 !important;
		margin: 0 !important;
		background-color: transparent;
		width: 100%;
		
		&::after {
			border: 0 ;
		}
	}
	.phyzm{
		display: flex;
		align-items: center;
		justify-content: space-between;
		input {
			width: 60%;
		}
		
		.text {
			width: 40%;
			text-align: right;
		}
	}
	.namebu{
		width: 690rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 40rpx;
		background-color: #10c696;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		color: #fff;
	}
</style>
